<template>
  <div class="item" v-if="this.data">
    <template v-if="this.data.length !== 0">
      <div class="list" v-for="items in this.data" :key="items.wlid">
        <div class="right">
          <router-link :to="`/wordsdetails/` + items.wid">
            <p class="item">{{ items.words }}</p>
          </router-link>
          <span class="item">
            ——{{ items.author }}:
            <router-link to="/bookdetails">{{ items.bname }}</router-link>
          </span>
          <div class="bottom">
            <div class="bottom-left">
              <h3>发布人:{{ items.name }}</h3>
              <em
                @click="addGz(items.id)"
                v-once-click
                class="el-icon-message-solid"
              ></em>
            </div>
            <span class="two">
              <em
                @click="addDz(items.id, items.wid)"
                v-once-click
                class="el-icon-trophy"
                >{{ items.dianzan }}</em
              >
              <em class="el-icon-chat-dot-round">{{ items.pinglun }}</em>
              <em class="el-icon-star-off">{{ items.shoucang }}</em>
            </span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <button @click="minusPage" :disabled="this.page == 1">上一页</button>
        <span>{{ page }}</span>
        <button @click="addPage" :disabled="this.maxPage == page">
          下一页
        </button>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      page: 1,
      maxPage: 1,
    };
  },
  //监听页数发生改变
  watch: {
    page() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  computed: {},
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url = "http://127.0.0.1:3000/v1/library/words";
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
        console.log("this.length:", this.data.length);
        this.maxPage = Math.ceil(this.data.length / 10);
        this.data = this.data.slice(10 * (this.page - 1), 10 * this.page);
      });
    },
    addGz(id) {
      const url4 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addDz(id, wid) {
      const url4 = "http://127.0.0.1:3000/v1/library/bestwords/updatedianzan";
      const params = `id=${id}&wid=${wid}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("点赞成功！");
        this.getData();
      });
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
*a {
  text-decoration: none;
  color: #000;
}
* {
  margin: 0;
  padding: 0;
}
.pagination {
  text-align: center;
  padding: 15px;
  // border: 1px solid black;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
#box {
  width: 100%;
}
.item {
  width: 1200px;
  margin: 0 auto;
  .list {
    // width: 1200px;
    // width: 100%;
    // display: flex;
    // margin: 10px;
    // width: 1200px;

    .right {
      display: flex;
      flex-direction: column;
      // margin: 10px;
      > span {
        // width: 100%;
        display: flex;
        justify-content: flex-end;
        // padding-right: 15px;
        // margin: 15px;
        // border: 1px solid black;
        > a {
          padding-right: 15px;
        }
      }

      .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid black;
        .bottom-left {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: 20px;
          em {
            padding-left: 15px;
          }
        }
        .two {
          em {
            padding: 15px;
          }
        }
      }

      p {
        line-height: 150%;
        text-indent: 30px;
        padding: 10px 0;
      }

      h3 {
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
      }
    }
  }
}
</style>
